$(function(){
    var height=$(window).height();
    var flag=true;
    var num=0;
    $(document).mousedown(function(e){
        e.preventDefault()
    })
    touch.on((".out"), 'swipeup', function(ev){
        if(num==$(".box").length-1){
            return
        };
        if(!flag){
            return
        };
        flag=false;
        clear(num)
        num++;
        $(".out").css({marginTop:-height*num})
        $(".box").eq(num).find(".left1 img").css("animation","none")
        $(".btns li").css({background:"none"}).eq(num).css({background:"#CCC"})
    });
    touch.on((".out"), 'swipedown', function(ev){
        if(num==0){
            return
        };
        if(!flag){
            return
        };
        flag=false;
        clear(num)
        num--;
        $(".btns li").css({background:"none"}).eq(num).css({background:"#CCC"})
        $(".out").css({marginTop:-height*num})
    });
    $(".out")[0].addEventListener("webkitTransitionEnd",function(){
        flag=true;
        $(".box").eq(num).find(".left1").css({transform:"translate(0,0)"});
        $(".box").eq(num).find(".right1").css({transform:"translate(0,0)"})
        // $(".box").eq(num).find(".left1")[0].addEventListener("webkitTransitionEnd",function(){
        //     $(".box").eq(num).find(".left1 img")[0].style.animation="zhuan 2s cubic-bezier(1,-0.03,.01,1.09) infinite"
        // })
    })

    $(".btns li").click(function(){

        var index=$(".btns li").index(this);
            $(".box").find(".left1").css({transform:"translate(-200px,0)"});
            $(".box").find(".right1").css({transform:"translate(200px,0)"})
        clear();
        num=index;
        $(".btns li").css({background:"none"}).eq(num).css({background:"#CCC"})
        $(".out").css({marginTop:-height*num})
    })
    $(window).resize(function(){
        height=$(window).height();
    var width=$(window).width();
        if(width>600){
            $(".col-s-hide").css("display","block")
        }else{
            $(".col-s-hide").css("display","none")

        }

    });
    $(window).resize();
    $(".hanm").click(function(){
        $(".col-s-hide").finish()

        $(".col-s-hide").slideToggle(200)
    })

    $(document).mouseWheel(function(){

        if(num==0){
            return
        };
        if(!flag){
            return
        };
        flag=false;
        $(".box").eq(num).find(".left1").css({transform:"translate(-200px,0)"});
        $(".box").eq(num).find(".right1").css({transform:"translate(200px,0)"})
        clear()
        num--;
        $(".btns li").css({background:"none"}).eq(num).css({background:"#CCX"})
        $(".out").css({marginTop:-height*num})
    },function(){

    if(num==$(".box").length-1){
        return
    };
    if(!flag){
        return
    };
    flag=false;
    $(".box").eq(num).find(".left1").css({transform:"translate(-200px,0)"});
    $(".box").eq(num).find(".right1").css({transform:"translate(200px,0)"})
    num++;
    $(".btns li").css({background:"none"}).eq(num).css({background:"#CCC"})
    $(".out").css({marginTop:-height*num})
    })
    $(".iconfont").click(function(){
        if(num==$(".box").length-1){
            return
        };
        if(!flag){
            return
        };
        flag=false;
        clear()
        num++;
        $(".btns li").css({background:"none"}).eq(num).css({background:"#CCC"})
        $(".out").css({marginTop:-height*num})
    })
    function clear(){
        $(".box").find(".left1").css({transform:"translate(-200px,0)"});
        $(".box").find(".right1").css({transform:"translate(200px,0)"})
        $(".left1 img").css("animation","none")
    }
    $(window).keydown(function(e){
        if(e.keyCode==38){
            if(num==0){
                return
            };
            if(!flag){
                return
            };
            flag=false;
            clear(num)
            num--;
            $(".btns li").css({background:"none"}).eq(num).css({background:"#CCC"})
            $(".out").css({marginTop:-height*num})
        }else if(e.keyCode==40){
            if(num==$(".box").length-1){
                return
            };
            if(!flag){
                return
            };
            flag=false;
            clear(num)
            num++;
            $(".btns li").css({background:"none"}).eq(num).css({background:"#CCC"})
            $(".out").css({marginTop:-height*num})
            $(".box").eq(num).find(".left1 img").css("animation","none")
        }
    })
})